<template>
	<view class="mingju">

			<view class="chaodai">
				<view class="left">
					<span class="shu"></span>
					<span class="title">作者：</span>
					<view class="item">
						<span @click="select(index,item)" v-for="(item,index) in author"
							:class="[tab==index?'actives1':'']">{{item}}</span>
			
					</view>
			
			
				</view>
			
			</view>
			<view class="content" v-for="(item,index) in listdata" v-if="item.quote!==''">
			
				<view class="item" @click="poetrydetail(item)">
					<p class="item_aticle">
						{{item.quote}}
					</p>
					<view class="author">
						<span>- {{item.author}} {{item.title}}</span>
					</view>
				</view>
				
			</view>
			
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				author:['李白','杜甫','白居易','王维','李商隐','杜牧','孟浩然','王昌龄','苏轼','李清照','辛弃疾','柳永','陆游','欧阳修','王安石',],
				tab:0,
				pageNum:0,
				listdata:[],
				author_name:"李白",
			
			}
		},
		onLoad() {
		
			this.list()
		},
	onShareAppMessage(res) {
			wx.showShareMenu({
			     withShareTicket: true,
			     menus: ['shareAppMessage', 'shareTimeline']
			    })
			return{
					title:"一起来学古诗词吧",
					imageUrl:'https://www.leedong.top/img/11556.png'
			}
			
			},
			//2.分享到朋友圈
	onShareTimeline(){
	
		return {
			title: '一起来学古诗词吧',
				imageUrl:'https://www.leedong.top/img/11556.png'
			
		}
	},
		methods:{
			select(v,name){
				this.pageNum=0;
				this.listdata=[]
				this.tab=v;
				this.author_name=name;
				this.list()
			},
			poetrydetail(t){
				uni.navigateTo({
					url:'/pages/poetrydetail/index?title='+JSON.stringify(t)
				})
			},
			list(){
				this.$api.love({author:this.author_name}).then((res)=>{
					this.listdata=this.listdata.concat(res.rows)
				})
			},
			
		}
	}
</script>

<style lang="scss">
	
	.mingju{
		
		.content{
			width: 100%;
			display: flex;
			border-bottom: 1px solid #f5f5f5;
			margin-top: 20px;
			justify-content: space-between;
			height: 60px;
			padding: 10px;
			.item{
				padding-left: 5px;
				.author{
					padding-top: 10px;
					font-size: 13px;
					color: #989494;
				}
			}
			.love{
				padding-right: 10px;
				img{
					width: 32px;
					height: 32px;
				}
			}
		}
	
		.more {
			text-align: center;
		
			span {
				font-size: 12px;
				color: #9a8383;
			}
		}
		.chaodai {
			width: 100%;
			display: flex;
			margin-top: 20px;
			border-bottom: 1px solid #f5f5f5;
		
			.left {
				
				.shu {
					height: 18px;
					display: inline-block;
					margin-left: 10px;
					width: 4px;
					vertical-align: middle;
					background-color: #7d8468;
				}
		
				.title {
					padding-left: 6px;
			font-size: 30rpx;
				}
		
				.item {
					display: inline;
		
					span {
						width: 50px;
						text-align: center;
						font-size: 28rpx;
						display: inline-block;
					}
		
					.actives1 {
						color: #fff;
						width: 50px;
						background-color: #7d8468;
						border:1px solid #7d8468;
						border-radius: 5px;
						
						
					}
				}
			}
		}
	}
</style>